<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="viewport" content="width=1920" />
    <meta name="x5-orientation" content="portrait" />
    <meta name="full-screen" content="yes" />
    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">-->
    <title>领导视窗</title>
    <script src="https://api.map.baidu.com/getscript?v=2.0&ak=KAYsf1crZqV9xgyWEzsGpaVzvobclAmu&t=1&s=1"></script>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <script>
      let dom = document.getElementsByTagName('html')[0]
      // dom.className = 'showLoading'
    </script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        min-width: 1580px;
      }
      #app {
        width: 100%;
      }
      .showLoading #loading {
        display: block;
      }
      #loading-meteor {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
      }
      #loading {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: none;
      }
      #loading img {
        width: 100%;
        display: block;
      }
      #loading .earth-small {
        position: absolute;
        top: 0;
        right: 8.3%;
        width: 24.7%;
        z-index: 20;
        transform: translate3d(0, 0, 0);
        animation: earthSmall 8s 0.5s linear alternate infinite;
      }
      #loading .earth-big {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 77.8%;
        z-index: 20;
        transform: translate3d(0, 10%, 0);
        animation: earthBig 8s linear alternate infinite;
      }
      #loading .astronaut {
        position: absolute;
        bottom: 24%;
        left: 5%;
        width: 30%;
        z-index: 20;
        transform: translate3d(0, 10%, 0);
        animation: earthBig 6s linear alternate infinite;
      }
      #loading .percentage {
        position: absolute;
        top: 35%;
        left: 50%;
        z-index: 30;
        transform: translateX(-40%);
        width: 8.28%;
      }
      #loading .percentage span {
        width: 29.8%;
        display: block;
        float: left;
      }
      .percentage-decade img,
      .percentage-bit img,
      .percentage-symbol img {
        opacity: 0;
      }
      .percentage-decade {
        animation: tabImgPart1 1s steps(1, start) forwards;
        background-size: 100% 100%;
        margin-right: 3%;
      }
      .percentage-bit {
        animation: tabBitImg1 0.5s 2 steps(1, start) forwards;
        background-size: 100% 100%;
      }
      #loading .percentage .percentage-symbol {
        width: 37.4%;
        background: url('<%= BASE_URL %>/static/images/number3-10.png') center
          no-repeat;
        background-size: 100% 100%;
      }
      #loading.loaded-api .percentage-symbol {
        width: 37.4%;
        background: url('<%= BASE_URL %>/static/images/number1-10.png') center
          no-repeat;
        background-size: 100% 100%;
      }
      .loaded-api .percentage-decade {
        animation: tabImgPart3 6.4s steps(1, start) forwards;
      }
      .loaded-api .percentage-bit {
        animation: tabBitImg3 0.8s 8 steps(1, start) forwards;
      }
      .sige-describe {
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 23%;
        z-index: 30;
      }
      @keyframes earthSmall {
        0% {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -40%, 0);
        }
      }
      @keyframes earthBig {
        0% {
          transform: translate3d(0, 10%, 0);
        }
        100% {
          transform: translate3d(0, 0, 0);
        }
      }
      @keyframes tabBitImg1 {
        0% {
          background: url('<%= BASE_URL %>/static/images/number1-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        10% {
          background: url('<%= BASE_URL %>/static/images/number3-0.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        20% {
          background: url('<%= BASE_URL %>/static/images/number3-1.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        30% {
          background: url('<%= BASE_URL %>/static/images/number3-2.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        40% {
          background: url('<%= BASE_URL %>/static/images/number2-3.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        50% {
          background: url('<%= BASE_URL %>/static/images/number2-4.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        60% {
          background: url('<%= BASE_URL %>/static/images/number2-5.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        70% {
          background: url('<%= BASE_URL %>/static/images/number1-6.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        80% {
          background: url('<%= BASE_URL %>/static/images/number1-7.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        90% {
          background: url('<%= BASE_URL %>/static/images/number1-8.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        100% {
          background: url('<%= BASE_URL %>/static/images/number1-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      @keyframes tabImgPart1 {
        0% {
          background: url('<%= BASE_URL %>/static/images/number1-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        50% {
          background: url('<%= BASE_URL %>/static/images/number3-0.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        100% {
          background: url('<%= BASE_URL %>/static/images/number3-1.png')
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      @keyframes tabImgPart2 {
        0% {
          background: url('<%= BASE_URL %>/static/images/number3-1.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        25% {
          background: url('<%= BASE_URL %>/static/images/number3-2.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        50% {
          background: url('<%= BASE_URL %>/static/images/number2-3.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        75% {
          background: url('<%= BASE_URL %>/static/images/number2-4.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        100% {
          background: url('<%= BASE_URL %>/static/images/number2-5.png')
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      @keyframes tabBitImg2 {
        0% {
          background: url('<%= BASE_URL %>/static/images/number2-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        10% {
          background: url('<%= BASE_URL %>/static/images/number2-0.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        20% {
          background: url('<%= BASE_URL %>/static/images/number2-1.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        30% {
          background: url('<%= BASE_URL %>/static/images/number2-2.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        40% {
          background: url('<%= BASE_URL %>/static/images/number2-3.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        50% {
          background: url('<%= BASE_URL %>/static/images/number2-4.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        60% {
          background: url('<%= BASE_URL %>/static/images/number2-5.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        70% {
          background: url('<%= BASE_URL %>/static/images/number2-6.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        80% {
          background: url('<%= BASE_URL %>/static/images/number2-7.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        90% {
          background: url('<%= BASE_URL %>/static/images/number2-8.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        100% {
          background: url('<%= BASE_URL %>/static/images/number2-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      @keyframes tabImgPart3 {
        0% {
          background: url('<%= BASE_URL %>/static/images/number3-1.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        12.5% {
          background: url('<%= BASE_URL %>/static/images/number3-2.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        25% {
          background: url('<%= BASE_URL %>/static/images/number2-3.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        37.5% {
          background: url('<%= BASE_URL %>/static/images/number2-4.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        50% {
          background: url('<%= BASE_URL %>/static/images/number2-5.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        62.5% {
          background: url('<%= BASE_URL %>/static/images/number1-6.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        75% {
          background: url('<%= BASE_URL %>/static/images/number1-7.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        87.5% {
          background: url('<%= BASE_URL %>/static/images/number1-8.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        100% {
          background: url('<%= BASE_URL %>/static/images/number1-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      @keyframes tabBitImg3 {
        0% {
          background: url('<%= BASE_URL %>/static/images/number1-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        10% {
          background: url('<%= BASE_URL %>/static/images/number3-0.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        20% {
          background: url('<%= BASE_URL %>/static/images/number3-1.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        30% {
          background: url('<%= BASE_URL %>/static/images/number3-2.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        40% {
          background: url('<%= BASE_URL %>/static/images/number2-3.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        50% {
          background: url('<%= BASE_URL %>/static/images/number2-4.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        60% {
          background: url('<%= BASE_URL %>/static/images/number2-5.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        70% {
          background: url('<%= BASE_URL %>/static/images/number1-6.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        80% {
          background: url('<%= BASE_URL %>/static/images/number1-7.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        90% {
          background: url('<%= BASE_URL %>/static/images/number1-8.png')
            no-repeat center;
          background-size: 100% 100%;
        }
        100% {
          background: url('<%= BASE_URL %>/static/images/number1-9.png')
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      .abnormal .index-tips-content {
        display: block;
      }
      .index-tips-content {
        position: fixed;
        width: 30%;
        top: 50%;
        left: 50%;
        z-index: 1000;
        transform: translate(-50%, -50%);
        display: none;
      }
      .index-tips-content .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
      }
      .index-tips-content .tips-title {
        width: 100%;
        font-size: 18px;
        color: #6f9dd6;
        line-height: 48px;
        padding: 0 0 0 7%;
        margin: 4.3% 0 0 0;
      }
      .index-tips-content .content-message {
        color: #6f9dd6;
        font-size: 14px;
        padding: 0 7%;
        line-height: 22px;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but leaderview doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="loading">
      <img src="<%= BASE_URL %>/static/images/loading-background.jpg" alt="" />
      <canvas id="loading-meteor"></canvas>
      <div class="earth-small">
        <img src="<%= BASE_URL %>/static/images/earth-small.png" alt="" />
      </div>
      <div class="earth-big">
        <img src="<%= BASE_URL %>/static/images/earth-big.png" alt="" />
      </div>
      <div class="astronaut">
        <img src="<%= BASE_URL %>/static/images/astronaut.png" alt="" />
      </div>
      <div class="loading-message">
        <div class="percentage">
          <span class="percentage-decade">
            <img src="<%= BASE_URL %>/static/images/number1-0.png" alt="" />
          </span>
          <span class="percentage-bit">
            <img src="<%= BASE_URL %>/static/images/number1-0.png" alt="" />
          </span>
          <span class="percentage-symbol">
            <img src="<%= BASE_URL %>/static/images/number1-10.png" alt="" />
          </span>
        </div>
        <div class="sige-describe">
          <img src="<%= BASE_URL %>/static/images/loadingMessage.png" alt="" />
        </div>
      </div>
      <div class="index-tips-content">
        <img src="<%= BASE_URL %>/static/images/tips_background.png" alt="" />
        <!--<span class="close-tips" @click="closeTips">-->
        <!--<i class="close-left"></i>-->
        <!--<i class="close-right"></i>-->
        <!--</span>-->
        <div class="content">
          <div class="tips-title">温馨提示</div>
          <p class="content-message">
            领导视窗暂不支持项目权限查看，您的账号未获取有效权限，请刷新重试，或联系系统管理员
          </p>
        </div>
      </div>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
      let canvas = document.getElementById('loading-meteor')
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
      let context = canvas.getContext('2d')
      let stars = []
      class Star {
        constructor() {
          context.clearRect(0, 0, window.innerWidth, window.innerHeight)
          this.x = Math.random() * window.innerWidth
          this.y = Math.random() * window.innerHeight
          this.length = Math.ceil(Math.random() * 50 + 20)
          this.angle = 30
          this.speed = 4
          let cos = Math.cos((this.angle * 3.14) / 180)
          let sin = Math.sin((this.angle * 3.14) / 180)
          this.width = this.length * cos
          this.height = this.length * sin
          this.offset_x = this.speed * cos
          this.offset_y = this.speed * sin
          this.alpha = 1
          this.color1 = 'rgba(56, 56, 56, 0.2)'
          this.color2 = 'rgba(0, 0, 0, 0.2)'
        }
        draw() {
          let line = context.createLinearGradient(
            this.x,
            this.y,
            this.x + this.width,
            this.y + this.height
          )
          line.addColorStop(0, 'rgba(200, 200, 200, 0.5)')
          line.addColorStop(0.3, 'rgba(100, 100, 100, 0.2)')
          line.addColorStop(0.6, 'rgba(50, 50, 50, 0.2)')
          context.save()
          context.beginPath()
          context.lineWidth = 1
          context.globalAlpha = this.alpha
          context.strokeStyle = line
          context.moveTo(this.x, this.y)
          context.lineTo(this.x + this.width, this.y - this.height)
          context.closePath()
          context.stroke()
          context.restore()
        }
        move() {
          let x = this.x + this.width - this.offset_x
          let y = this.y - this.height
          context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5)
          this.x = this.x - this.offset_x
          this.y = this.y + this.offset_y
          this.draw()
        }
      }
      function init() {
        for (let i = 0; i < 2; i++) {
          let star = new Star()
          stars.push(star)
        }
        drawStar()
      }
      function drawStar(num) {
        for (let i = 0; i < num; i++) {
          stars[i].move()
          if (stars[i].y > window.innerHeight + 100) {
            context.clearRect(
              stars[i].x,
              stars[i].y - stars[i].height,
              stars[i].width,
              stars[i].height
            )
            stars[i] = new Star()
          }
        }
      }
      init()
      clearInterval(window.loadingMeteor)
      let loadingDom = document.getElementById('loading')
      window.loadingMeteor = setInterval(function() {
        drawStar(Math.random() > 0.7 ? 1 : 2)
        if (loadingDom.style.display === 'none') {
          clearInterval(window.loadingMeteor)
        }
      }, 5)
    </script>
  </body>
</html>
